<template>
  <div
    v-if="showShareFlag"
    class="shareUrlForm"
    :class="[isShowAircraftComp ? 'right_1':'right_2', nestInfo.nest_type_id === 2 ? 'bottom_2':'bottom_1']"
  >
    <div class="shareFormTitle">
      <div class="title">直播分享</div>
      <svg-icon class="closeIcon" icon-class="close" @click="closeShareForm"/>
    </div>

    <div class="shareBlock" style="flex: 1">
      <div class="shareTitle">分享链接</div>
      <div class="shareUrl">{{ shareUrl }}</div>
      <div class="shareButton" @click="copyUrl">复制链接</div>
    </div>
    <div class="shareBlock">
      <div class="shareTitle">分享二维码</div>
      <img ref="shareQRCode" class="shareImg" :src="shareImg">
      <div class="shareButton" @click="downloadQRCode">下载二维码</div>
    </div>
    <div class="sharePeriod">分享有效期至：{{ endTime }}</div>
  </div>
</template>

<script>
// import {closeShareVideo, countShareVideo, getShareVideoInfo} from "@/api/flycontrol";
import {getTimeString} from "@/utils/formatTime";

export default {
  name: 'AircraftVideoShareCard',
  props: {
    isShowAircraftComp: {
      type: Boolean,
      default: () => true
    },
    nestInfo: {
      type: Object,
      default: () => null
    },
    shareUrl: {
      type: String,
      default: () => ''
    },
    shareImg: {
      type: String,
      default: () => ''
    },
    deadLine: {
      type: Number,
      default: () => 0
    }
  },
  data() {
    return {
      showShareFlag: false,
      // shareUrl: 'aaaaa',
      // shareImg: '',
      shareCode: '',
    }
  },
  computed: {
    endTime() {
      if (this.deadLine) {
        return getTimeString(this.deadLine * 1000)
      } else {
        return '00-00-00 00:00:00'
      }

    }
  },
  watch: {
    nestInfo: {
      handler(val) {
        // console.log('watch nestInfo', val)
        // val && this.initData(val)
      },
      immediate: true
    },
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    closeShare() {
      this.showShareFlag = false
    },
    showShareForm() {
      this.showShareFlag = true
    },

    closeShareForm() {
      this.showShareFlag = false
      this.selectedVideoItem = null
    },
    copyUrl() {
      const input = document.createElement('input')
      input.value = this.shareUrl
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      this.$message.success('复制成功')
    },
    downloadQRCode() {
      const name = new Date().getTime()
      var image = new Image()
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height

        var context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        var url = canvas.toDataURL('image/png')
        // 生成一个a元素
        var a = document.createElement('a')
        // 创建一个单击事件
        var event = new MouseEvent('click')

        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
        a.download = name || '下载图片名称'
        // 将生成的URL设置为a.href属性
        a.href = url

        // 触发a的单击事件
        a.dispatchEvent(event)
      }
      image.src = this.$refs.shareQRCode.getAttribute('src')
    }
  }
}
</script>

<style scoped lang="scss">
.shareUrlForm {
  position: absolute;
  //right: 685px;
  //bottom: 70px;
  width: 300px;
  height: 370px;
  background-color: rgba(5, 29, 40, 0.6);
  z-index: 2;
  caret-color: transparent;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  pointer-events: auto;

  .shareFormTitle {
    position: relative;
    width: 100%;
    background-color: rgba(5, 29, 40, 1);
    padding: 10px 0;
    height: 40px;

    .title {
      text-align: center;

    }

    .closeIcon {
      position: absolute;
      right: 10px;
      top: 5px;
      width: 30px;
      height: 30px;
      cursor: pointer;
    }
  }

  .shareBlock {
    padding: 5px;
    width: 100%;
    display: flex;
    flex-direction: column;

    .shareTitle {
      text-align: left;
    }

    .shareUrl {
      padding: 10px;
      color: lightgrey;
      text-align: left;
      word-break: break-all;
      font-size: 12px;
    }

    .shareImg {
      width: 100px;
      height: 100px;
      border: white 1px solid;
      margin: 10px;
      align-self: center;

    }

    .shareButton {
      margin: auto;
      width: 90px;
      padding: 3px 10px;
      border-radius: 4px;
      text-align: center;
      background-color: #1cc1ff;
      cursor: pointer;
      font-size: 14px;
    }
  }

  .sharePeriod {
    margin-top: 5px;
    margin-bottom: 15px;
  }

}

.right_1 {
  right: 685px;
}

.right_2 {
  right: 345px;
}

.bottom_1 {
  bottom: 70px;
}

.bottom_2 {
  bottom: 280px;
}
</style>
